﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>平台登录</title>
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/login.css" rel="stylesheet" />
    <script src="~/Scripts/CommonJS.js"></script>
    <script src="~/Scripts/jquery.cookie.js"></script>
</head>
<body style="background:#3f4553;background-image: -webkit-gradient(radial,50% 100%,10,50% 50%,1000,from(#3f4553),to(#1f2126));background-image:-moz-radial-gradient(center 80px 45deg, circle farthest-corner, #3f4553 0%, #1f2126 100%);">
    <div class="login-box">
        <div class="login-logo">平台中心登录</div>
        <form class="clearfix">
            <div class="form-option">
                <input type="text" class="text" id="username" placeholder="账号..." />
                <input type="password" class="text" id="password" placeholder="密码..." />
                <input type="text" class="text text-code" id="checkCode" maxlength="4" placeholder="验证码..." style="display:none" />

                <div class="tipic-dialog"><img id="checkCodeImg" title="点击更换验证码" src="login/GetCheckCode" /></div>
                <button type="button" class="login-btn">登录</button>
                <span id="checkBoxIcon" class="glyphicon"></span>
                <span class="glyphicon glyphicon-user"></span>
                <span class="glyphicon glyphicon-lock"></span>
            </div>
            <div class="form-option">
                <label><input type="checkbox" id="keepLogin" />保持登录状态</label>
            </div>
            <div class="error-info" style="display:none">
                <p><span class="glyphicon glyphicon-exclamation-sign"></span></p>
            </div>

        </form>
    </div>

    <script type="text/javascript">
        var path = '@Url.Action("Login")';
        $(function () {
            if (top.location != location) {
                top.location.href = location.href;
            }
			if($(window).width()<800){
				$('.login-box').css('margin',0);
				$(body).css('background','#3f4553');
			}
            path = path.substring(0, path.lastIndexOf('/')+1 );

            $('.text-code').focus(function () {
                $('.tipic-dialog').fadeIn(300);
            });


            $('img').click(function () {
                $('.text-code').focus();
                changeCheckCode();
            });

            $('button').click(function () {
                loginBtnClick();
            });

            $('input').keydown(function () {
                $('.error-info').hide();
                checkBoxIcon();
            });

            initUsername();

        });


        function loginBtnClick() {
            var username = $.trim($('#username').val());
            var password = $.trim($('#password').val());
            var checkCode = $.trim($('#checkCode').val());
			var loading = showLoading();
            try {
                checkInputValid(username, password, checkCode);
				
                login(username, password, checkCode);
				
				loading.close();
				
            }
            catch (e) {
                showErrorMsg(e.message);
				loading.close();
            }
        }

        function checkBoxIcon(type) {
            var right = 'glyphicon-ok-circle', wrong = 'glyphicon-remove-circle';
            var obj = $('#checkBoxIcon');
            if (!type) {
                obj.removeClass(right).removeClass(wrong);
            }
            else if (type == 'right')
                obj.removeClass(wrong).addClass(right);
            else
                obj.removeClass(right).addClass(wrong);
        }

        function checkInputValid(username, password, checkCode) {
            if (!username) {
                $('#username').select();
                throw new Error('请输入用户名');
            }
            if (!password) {
                $('#password').select();
                throw new Error('请输入密码');
            }
            var display = $('#checkCode').css('display') != 'none';
            if (display && !checkCode) {
                $('#checkCode').select();
                throw new Error('请输入验证码');
            }
            var checkCodeWrongClass = 'glyphicon-remove-circle';
            if ($('#checkBoxIcon').hasClass(checkCodeWrongClass)) {
                $('#checkCode').select();
                throw new Error('验证码错误');
            }
        }

        function showErrorMsg(msg) {
			var icon='<span class="glyphicon glyphicon-exclamation-sign"></span>';
            if (msg)
                $('.error-info p').html(icon+msg).parent().show();
            else
                $('.error-info').hide();
        }

        function login(username, password, checkCode) {
            var loading = showLoading();
            $.ajax({
                type: "post",
                url: path + 'login',
                data: {
                    username: username,
                    password: password,
                    checkCode: checkCode
                },
                dataType: "json",
                async:true,
                success: function (result) {
                    loading.close();
                    showErrorMsg();
                    if (result.success) {
                        var options = { path: "/" };
                        if ($('#keepLogin').attr('checked'))
                            options.expires = 365;
                        $.cookie('Himall-PlatformManager', result.userId, options);
                        $.cookie('Himall-PlatformUsername', username, { path: "/", expires: 365 });

                        var url = QueryString('return');
                        if (!url)
                            url = '/admin';
                        location.replace(url);
                    }
                    else {
                        $('#checkCode').val('');
                        checkBoxIcon();

                        if (result.errorTimes >= result.minTimesWithoutCheckCode) {
                            var checkCode = $('#checkCode');
                            var display = checkCode.css('display') != 'none';
                            if (!display) {
                                checkCode.show().focus();
                                bindCheckBoxInputChangeEvent();
                            }
                            else
                                changeCheckCode();
                        }
                        $('#password').select();
                        showErrorMsg(result.msg);
                    }
                },
                error: function () {
                    loading.close();
                    showErrorMsg('网络错误');
                }
            });
        }

        function changeCheckCode() {
            $('#checkCodeImg').attr('src', path + 'GetCheckCode?time=' + new Date().getTime());
        }

        function checkCheckCode() {
            var checkCode = $.trim($('#checkCode').val());
            if (checkCode.length < 4)
                checkBoxIcon('wrong');
            else {
                $.post(path + 'CheckCode', { checkCode: checkCode }, function (result) {
                    if (result.success) {//验证码正确
                        checkBoxIcon('right');
                    }
                    else {
                        if (result.msg) {//验证码校验异常
                            showErrorMsg(result.msg);
                        }
                        else {//检验码不正确
                            checkBoxIcon('wrong');
                        }

                    }

                });
            }
        }

        document.onkeydown = function () {
            if (event.keyCode == 13) {
                loginBtnClick();
                
            }
        }

        function bindCheckBoxInputChangeEvent() {
            $('#checkCode').keyup(function () {
                var text = $(this).val();
                if (text.length == 4)
                    checkCheckCode();
            });

        }

        function initUsername() {
            var defaultUsername = $.cookie('Himall-PlatformUsername');
            if (defaultUsername) {
                $('#username').val(defaultUsername);
                $('#password').focus();
            }
            else
                $('#username').focus();
        }
        $(function () {
            if (top.location != location) {
                top.location.href = location.href;
            }
        });
    </script>
</body>
</html>
